<template>
    <div id="tmpl">
        <div id="postcomment">
            <h3>发表评论</h3>
            <p></p>
            <textarea placeholder="请输入您的评论内容。。。" v-model="postcontent"></textarea>
            <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        </div>
        <div id="getcomments">
            <h3>评论列表</h3>
            <div id="list" v-for="(item,index) in list" >
                <div id="title">
                    <span>第{{index+1}}楼</span>
                    <span>用户:{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datafmt('YYYY-MM-DD HH:mm:ss')}}</span>
                </div>
                <p>{{item.content}}</p>
            </div>
        </div>
        <mt-button type="danger" plain size="large" @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            pageindex: 1,
            postcontent: '',
            list: [
                // {
                //     user_name: "匿名用户",
                //     add_time: "2017-09-12T09:11:52.000Z",
                //     content: "undefined"
                // },
                // {
                //     user_name: "匿名用户",
                //     add_time: "2017-09-12T09:11:52.000Z",
                //     content: "undefined"
                // },
                // {
                //     user_name: "匿名用户",
                //     add_time: "2017-09-12T09:11:52.000Z",
                //     content: "undefined"
                // }
                ]

        }
    }, 
    props: ['id'],
    created() {
        this.getcomments(this.pageindex);
    },
   
    methods: {
        getmore(){
            this.pageindex++;
            this.getcomments(this.pageindex);
        },
        getcomments(pageindex){
            this.pageindex=pageindex || 1;
            var url=common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+this.pageindex;
            this.$http.get(url).then(function(res){
                if(res.body.status !=0){
                    Toast(res.body.message);
                    return;
                }
                this.list=this.list.concat(res.body.message);
                console.log(this.list);
            })
        },

        postcomment() {
            if(this.postcontent.trim().length<=0){
                Toast('您评论的内容不能为空');
                return;
            }
            var url = common.apidomain + '/api/postcomment/' + this.id;
            this.$http.post(url, { content: this.postcontent }, { emulateJSON: true }).then(function(res) {
                Toast(res.body.message);
                this.list=[{
                    user_name: "匿名用户",
                    add_time: new Date(),
                    content: this.postcontent
                    }].concat(this.list);
                this.postcontent='';
            })
        }
    }
}
</script>
<style scoped>
#postcomment {
    color: #0094ff;
    padding: 10px;
}

#postcomment p {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#getcomments h3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#getcomments #title {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 5px 0;
}
</style>


